<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>闪光图片</title>
<style>

@-webkit-keyframes luckRotate {
    0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(90deg);
        }
        100% {
            transform: rotateY(0deg);
        }
}

@keyframes luckRotate {
    from    { transform: rotate(0deg); }
    4%      { transform: rotate(5deg); }
    12.5%   { transform: rotate(-5deg); }
    21%     { transform: rotate(5deg); }
    29%     { transform: rotate(-5deg); }
    37.5%   { transform: rotate(5deg); }
    46%     { transform: rotate(-5deg); }
    50%,to  { transform: rotate(0deg); }
}
.luck-animate{
    width: 160px;
    height: 200px;
    margin: 0 0 0 50px;
    background: linear-gradient(90deg, #9ccc65 45%, #cde5b2 50%, #9ccc65 55%);
    animation: luckRotate 1s linear infinite;
}
</style>
</head>
<body>
    <div class="luck-animate">翻转动画</div>

    <button class="btn-shiny">纯色背景按钮</button>
</body>
</html> 